<template>
  <div class="container">
    <div class="top" @click="search">
      <van-search
                  show-action
                  placeholder="请输入搜索关键词"
                  style="border-radius: 10px"
      />
    </div>
    <div class="swipe">
      <van-swipe @change="onChange">
        <van-swipe-item>
          <van-image
              width="100%"
              height="100%"
              fit="contain"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
        </van-swipe-item>
        <van-swipe-item>
          <van-image
              width="100%"
              height="100%"
              fit="contain"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
        </van-swipe-item>

      </van-swipe>
    </div>

    <div class="body">
      <div class="option"  >
        <van-tabs v-model:active="active" @click-tab="onClickTab">
          <van-tab title="近期热度"></van-tab>
          <van-tab title="最多人玩"></van-tab>
           <van-tab title="推荐游戏"></van-tab>
        </van-tabs>
      </div>

      <div class="goods">
        <div class="item" v-for="(item,i) in goods[0]" :key="i" @click="navTo(item)">
          <div class="img">
             <van-image
              width="100%"
              height="100%"
              fit="contain"
              :src="item.img"
          />
          </div>

          <div class="info">
            <div class="name">
              {{item.name}}   <van-tag :type="item.count==1?'warning': 'success'">{{item.count==1?'使用中':'空闲中'}}</van-tag>

            </div>
            <div class="score">
              {{item.score}} <span>积分</span>
            </div>
            <div class="btm">
              <div class="fire">
                <van-icon name="fire-o" /> {{item.download}}
              </div>
              <div class="eye">
                <van-icon name="eye-o" /> {{item.visit}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive,onMounted,inject} from "vue";
import {useRouter} from "vue-router";
import {showNotify} from "vant";
const axios  = inject("$axios")
const router = useRouter()
const search=()=>{
  router.push("/search")
}
const active =ref(0)
const value = ref("")
const goods = reactive([[]])
const onSearch = () => {
  console.log(value.value)
}
const navTo = e=>{
  axios.get('goods/visit?id='+e.id).catch(err=>showNotify({type: 'danger', message:"网络异常"})
  )
  router.push('/item/'+e.id)
}
const onClickTab=(e)=>{
  console.log(e.title)
 axios.get('goods/list?kind='+e.title).then(res=>{
    goods[0] = res.data.data
    console.log(res)
  }).catch(err=>{
     showNotify({type: 'danger', message:"网络异常"})
      }
  )
}
const onCancel = () => {
  value.value = ''
}
const onChange = (e) => {
 axios.get('goods/list?kind='+e.title).then(res=>{
    goods[0] = res.data.data
    console.log(res)
  }).catch(err=>{
     showNotify({type: 'danger', message:"网络异常"})
      }
  )
}
onMounted(()=>{
  axios.get('goods/list?kind=近热度').then(res=>{
    goods[0] = res.data.data
    console.log(res)
  }).catch(err=>{
     showNotify({type: 'danger', message:"网络异常"})
      }
  )
})
</script>

<style scoped lang="less">
.container {

  .top {
    width: 90%;
    margin: 10px;
  }

  .swipe {
    margin: 10px;
    width: 90%;

  }

  .body{
    width: 90%;

    .option{
      padding: 10px;
      border-radius: 10px;
      background-color: #fff;
    }
    .goods{
      margin:10px;

      .item{
        margin-bottom: 20px ;
        border:1px transparent solid;
        background-color: #fff;
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 150px;

        .img{
          width: 130px;
          height: 130px;
          transform: translateX(-10px);
          border-radius: 10px;
          padding: 0;
          overflow: hidden;
        }

        .info{
          flex:1;
          height: 100%;
          margin: 0 15px;

          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;

          .name{
            margin:15px 0;
            margin-bottom: 0;
            line-height: 30px;
            color:#303133;
            font-size: 20px;
            font-weight: 700;
          }
          .score{
             margin-bottom:20px;
            color: orangered;
            font-weight: 900;
            font-size: 24px;

            span{
              color:#303133;
              font-size: 14px;
            }
          }
          .btm{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding-right: 20px;
            box-sizing: border-box;
          }
        }
      }
    }
  }
}
</style>